<template>
    <my-form @submit="dialogSubmit" @cancle="dialogCancle" v-model="form" ref="form">
        <el-form-item label-width="0" prop="menu">
            <my-tree
                :url=" $store.getters.sysUrl + '/role/getmenutree'"
                v-model="form.menu"
                v-bind:type-name="typename"
                :checkbox="true">
            </my-tree>
        </el-form-item>
	</my-form>
</template>

<script>
export default {
    props: {
        roleid: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            form: {
				menu: []
			},
			type: ''
        }
    },
    computed:{
		typename:function(){
			return getSearch('type');
		}
	},
	methods:{
		dialogSubmit: function(){
            var that = this;

			var menuids, noRoot = [];
			that.form.menu.forEach(function(item) {
				if(!that.form.menu.some(function(code) {
					return ((code.indexOf(item) > -1) && (code.indexOf(item) == 0) && (code != item))
				}) ){
					noRoot.push(item)
				}
			});
			menuids = noRoot.join(',');

			that.$post(this.$store.getters.sysUrl + '/role/allotmenu', {
				rowguid: this.roleid,
				menuids: menuids
			}, function(data){
				ShowMsg.call(this, '权限分配完成', 'success');
				this.dialogCancle();
			})

        },
        dialogCancle: function(){
            this.$emit('close');
        },
		getDataCallback: function(data){
			data = data || [];
			this.form.menu = data.map(function(item){
				return item.menuid;
			})
		}
	},
	mounted:function(){
		var that = this;
		this.type = getSearch('type');

        that.$get(this.$store.getters.sysUrl + '/role/rolemenulist', {
            rowguid: this.roleid
        }, function(data){
            that.getDataCallback(data);
        })
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
